<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="/WEB-INF/jsp/common/header.jsp" %>
</head>
<body>
	<div id="categoryToolbar">
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" id="addBtn">新增子类别</a>
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" id="deleteBtn">删除</a>
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'" id="updateBtn">修改</a>
	</div>
	<div id="addDialog" class="easyui-dialog" data-options="modal:true,title:'新增类别',closed:true" style="width:250px;height:190px;">
		<form id="addForm">
			<table width="100%">
				<tr>
					<td>编号</td>
					<td><input type="text" name="id" id="addId"  readonly="readonly"/></td>
				</tr>
				<tr>
					<td>名称</td>
					<td><input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></td>
				</tr>
				<tr>
					<td>顺序</td>
					<td><input type="text" name="sort" id="addSort" readonly="readonly"/></td>
				</tr>
				<tr>
					<td>父id</td>
					<td><input type="text" name="parent_id" id="addPid" readonly="readonly"/></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="updateDialog" class="easyui-dialog" data-options="modal:true,title:'修改类别',closed:true" style="width:350px;height:390px;">
		<form id="updateForm" method="post">
			<table width="100%">
				<tr>
					<td>编号</td>
					<td><input type="text" name="id" readonly="readonly"/></td>
				</tr>
				<tr>
					<td>名称</td>
					<td><input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></td>
				</tr>
				<tr>
					<td>顺序</td>
					<td><input type="text" name="sort" readonly="readonly"/></td>
				</tr>
				<tr>
					<td>父id</td>
					<td><input type="text" name="parent_id" readonly="readonly"/></td>
				</tr>
			</table>
		</form>
		<table id="updateTable" style="width:300px;height:240px;"></table>
	</div>
	<table id="categoryTable" width="100%"></table>
	<script type="text/javascript">
// 修改类别
	$("#updateBtn").click(function(){
		var obj = $("#categoryTable").treegrid("getSelected");
		if(obj == null) {
			$.messager.alert("请选中要修改的类别");
			return ;
		}
		obj.parent_id = obj.pid;
		obj.name = obj.text;
		//console.log(obj);
		$("#updateForm").form("load", obj);
		$("#updateTable").datagrid("reload",{pid: obj.pid});
		$("#updateDialog").dialog("open");
	});	
	$("#updateBtn").tooltip({ content: "<p>只能修改类别名称和顺序" });
	$("#updateTable").datagrid({
		url:"${root}/admin/category/findByPid",
		fitColumns:true,
		singleSelect: true,
		columns:[[
		    {title:"编号", field:"id", width: 100},
		    {title:"名称", field:"text", width: 200},
		    {title:"顺序", field:"sort", width: 100},
		    {title:"顺序", field:"op", width: 230, formatter: function(op, row, idx){
		    	return "<input type='button' value='上移' onclick='moveUp("+idx+")'/><input type='button' value='下移' onclick='moveDown("+idx+")'/>";
		    }}
		]]
	});
	function moveUp(idx){
		if(idx > 0) {
			var rows = $("#updateTable").datagrid("getRows"); // 得到所有行  rows[idx]  rows[idx-1]
			var tmpId = rows[idx-1].id;
			var tmpText = rows[idx-1].text;
			rows[idx-1].id = rows[idx].id;
			rows[idx-1].text = rows[idx].text;
			rows[idx].id = tmpId;
			rows[idx].text = tmpText;
			$("#updateTable").datagrid("refreshRow", idx-1); // 刷新上一行
			$("#updateTable").datagrid("refreshRow", idx); // 刷新当前行
		}
	}
	function moveDown(idx){
		var rows = $("#updateTable").datagrid("getRows");
		if(idx < rows.length-1) {
			var rows = $("#updateTable").datagrid("getRows");
			var tmpId = rows[idx+1].id;
			var tmpText = rows[idx+1].text;
			rows[idx+1].id = rows[idx].id;
			rows[idx+1].text = rows[idx].text;
			rows[idx].id = tmpId;
			rows[idx].text = tmpText;
			$("#updateTable").datagrid("refreshRow", idx+1);
			$("#updateTable").datagrid("refreshRow", idx);
		}
	}

// 保存类别修改
	$("#updateDialog").dialog({
		buttons:[
		   {text:"保存", handler: function(){
			   $("#updateForm").form("submit", {
				   url: "${root}/admin/category/update",
				   onSubmit: function(param){ // param 对象代表所有请求参数
					   // 得到表格的所有行
					   var rows = $("#updateTable").datagrid("getRows");
					   //   id        sort
					   // {"1020000":1010000, "1010000":1020000, ...}  ==> Map<String, Integer>		
					   
					   var all = {};
					   for(var i = 0; i < rows.length; i++){
						   // 对象.属性名   对象["属性"]
						   all[rows[i].id] = rows[i].sort;
					   }
					   param.rows = JSON.stringify(all); // 把对象转换为json字符串, 并添加一个名为 rows的请求参数
					   //console.log(param.rows);
					   return $("#updateForm").form("validate");
				   },
				   success: function(){
					   $("#updateForm").form("reset");
					   $("#updateDialog").dialog("close");
					   $("#categoryTable").treegrid("reload");
				   }
			   });
		   }}
		]
	});
	
	//  01 00 00 00  一级类别
	//  01 02 00 00  二级类别
	//  01 02 01 00  三级类别
	
	//   01 02 80 00
	
	function getLevel(id) {
		if(id / 100 % 100 > 0) {
			return 3;
		} else if(id / 10000 % 100 > 0) {
			return 2;
		} else {
			return 1;
		}
	}
	
// 添加子类别
	$("#addBtn").click(function(){		
		var obj = $("#categoryTable").treegrid("getSelected");
		//console.log(obj);
		if(obj == null) { // 不选，表示添加一级类别
			//$("#addPid").val(0);
			$.get("${root}/admin/category/findNextId?pid=" + 0, function(json){
				$("#addId").val(json.next);
				$("#addSort").val(json.next);
				$("#addPid").val(0);
			});
		} else {
			if(getLevel(obj.id) == 3) {
				$.messager.alert("已经是3级类别，不能添加子类别");
				return;
			}
			$.get("${root}/admin/category/findNextId?pid=" + obj.id, function(json){
				$("#addId").val(json.next);
				$("#addSort").val(json.next);
				$("#addPid").val(obj.id);
			});			
		}		
		$("#addDialog").dialog("open");
	});	
	$("#addBtn").tooltip({ content: "<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请选中父类别，<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;没有选中表示添加一级类别" });

// 保存新增子类别
	$("#addDialog").dialog({
		buttons:[
		   {text:'保存', handler:function(){
			   $("#addForm").form("submit", {
				   url: "${root}/admin/category/save",
				   onSubmit: function(){
					   return $("#addForm").form("validate");
				   },
				   success: function(){
					   $("#addForm").form("reset");
					   $("#addDialog").dialog("close");
					   $("#categoryTable").treegrid("reload");
				   }
			   });
		   }}
		]
	});

// 树状表格
	$("#categoryTable").treegrid({
		url: "${root}/admin/category/findAll",
		toolbar:"#categoryToolbar",
		dataPlain : true,
		parentField: "pid",
		idField: "id",
		treeField: "text",
		fit: true,
		fitColumns: true,
		columns: [[
			{ title: "编号", field: "id" ,width:100},
			{ title: "名称", field: "text" ,width:300},
			{ title: "排序", field: "sort" ,width:100},
			{ title: "父id", field: "pid" ,width:100}
		]],
		onLoadSuccess:function(){			
			$("#categoryTable").treegrid('collapseAll');
		}
	});
	</script>
</body>
</html>